<template>
	<div class="nav-container">
		<!-- 桌面端导航 -->
		<div class="nav desktop-nav" v-if="judge === 0">
			<div class="logoTxt" @click="goToHome">
				<img src="../assets/logo.png" />
				<p class="site-title">慈善动态网</p>
			</div>
			<div class="menu-container">
				<el-menu :default-active="$route.path" class="navBox" background-color="#fff" text-color="#000"
					active-text-color="#DA0606" mode="horizontal" @select="handleSelect" router v-if="!search">
					<template v-for="item in navMenuData">
						<el-menu-item :index="item.href" v-if="item.isShow == 0"
							:key="item.id">{{ item.name }}</el-menu-item>
						<el-menu-item :index="item.number" v-if="item.isShow == 1 && item.name == '首页'"
							:key="item.id">{{ item.name }}</el-menu-item>
						<el-menu-item :index="'/' + item.number + '/' + item.id"
							v-if="item.isShow == 1 && item.children.length == 0 && item.name != '首页' && item.name != '工具集'"
							:key="item.id">{{ item.name }}</el-menu-item>
						<el-menu-item @click="goTools()"
							v-if="item.isShow == 1 && item.children.length == 0 && item.name == '工具集'"
							:key="item.id">{{ item.name }}</el-menu-item>
						<el-submenu :index="item.number + '/' + item.id" v-if="item.isShow == '1' && item.children.length != 0"
							:key="item.id">
							<template slot="title">{{ item.name }}</template>
							<template v-for="items in item.children">
								<el-menu-item :index="'/news/' + items.id" :key="items.id">{{ items.name }}</el-menu-item>
							</template>
						</el-submenu>
					</template>
				</el-menu>
			</div>
		</div>

		<!-- 移动端导航 -->
		<div class="nav mobile-nav" v-else>
			<div class="mobile-header">
				<div class="logoTxt" @click="goToHome">
					<img src="../assets/logo.png" />
					<p class="site-title">慈善动态网</p>
				</div>
				<button class="menu-toggle" @click="toggleMenu">
					<i v-if="!isCollapse" class="el-icon-s-fold" style="font-size: 24px;"></i>
					<i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 24px;"></i>
				</button>
			</div>

			<!-- 遮罩层 -->
			<div class="menu-overlay" v-if="isCollapse" @click="toggleMenu"></div>

			<!-- 移动端菜单抽屉 - 右侧滑入、宽度减半、高度自适应、圆角 -->
			<div class="mobile-menu-drawer" :class="{ 'open': isCollapse }" ref="drawer">
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="handleSelect2" router>
					<template v-for="item in navMenuData">
						<el-submenu :index="'/' + item.number + '/' + item.id" v-if="item.children.length != 0"
							:key="'submenu-' + item.id">
							<template slot="title">
								<span slot="title">{{ item.name }}</span>
							</template>
							<el-menu-item :index="'/news/' + items.id" v-for="items in item.children"
								:key="'menuitem-' + items.id">
								{{ items.name }}
							</el-menu-item>
						</el-submenu>
						<el-menu-item :index="'/' + item.number + '/' + item.id"
							v-if="item.children.length == 0 && item.number != '/' && item.name != '工具集'"
							:key="'menuitem-' + item.id">
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
						<el-menu-item :index="item.number" v-if="item.children.length == 0 && item.number == '/'"
							:key="'menuitem-root-' + item.id">
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
						<el-menu-item @click="goTools()" v-if="item.children.length == 0 && item.name == '工具集'"
							:key="'tools-' + item.id">
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</template>
				</el-menu>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "NavMenu",
	data() {
		return {
			id: '',
			module: 0,
			navMenuData: [],
			windowWidth: 0,
			judge: 0, // 0: 桌面端, 1: 移动端
			isCollapse: false, // 控制移动端菜单展开/收起
			search: false,
			searchKey: ''
		};
	},
	created() {
		this.windowWidth = window.innerWidth;
		this.judge = this.windowWidth < 768 ? 1 : 0;
		this.getNavListData();
	},
	mounted() {
		window.addEventListener('resize', this.handleResize);
		// 添加点击外部关闭抽屉的事件监听
		document.addEventListener('click', this.handleOutsideClick);
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize);
		// 移除事件监听
		document.removeEventListener('click', this.handleOutsideClick);
		// 确保页面恢复滚动能力
		document.body.style.overflow = '';
	},
	methods: {
		handleResize() {
			this.windowWidth = window.innerWidth;
			this.judge = this.windowWidth < 768 ? 1 : 0;

			// 在桌面视图下确保菜单收起并恢复滚动
			if (this.judge === 0) {
				this.isCollapse = false;
				document.body.style.overflow = '';
			}
		},
		handleSelect(key, keyPath) {
			// 桌面端菜单选择处理
		},
		handleSelect2(key, keyPath) {
			// 移动端菜单选择后自动收起
			if (key) {
				this.$router.push(key);
			}
			this.isCollapse = false;
			document.body.style.overflow = '';
		},
		toggleMenu() {
			// 切换菜单状态
			this.isCollapse = !this.isCollapse;

			// 控制页面滚动
			if (this.isCollapse) {
				document.body.style.overflow = 'hidden';
			} else {
				document.body.style.overflow = '';
			}
		},
		// 点击抽屉外部关闭抽屉
		handleOutsideClick(event) {
			// 仅在抽屉打开时执行
			if (!this.isCollapse) return;

			// 获取抽屉元素和菜单按钮元素
			const drawer = this.$refs.drawer;
			const menuToggle = document.querySelector('.menu-toggle');

			// 判断点击是否发生在抽屉外部且不是菜单按钮
			if (drawer && menuToggle &&
				!drawer.contains(event.target) &&
				!menuToggle.contains(event.target)) {
				this.isCollapse = false;
				document.body.style.overflow = '';
			}
		},
		handleOpen(key, keyPath) {
			this.$router.push(key);
		},
		handleClose(key, keyPath) { },
		getNavListData() {
			this.$axios.get("base/basepcInfo/categoryList").then((res) => {
				this.navMenuData = res.data.result;
			});
		},
		openSearch() {
			this.search = !this.search;
			this.isCollapse = false;
			document.body.style.overflow = '';
		},
		closeSearch() {
			this.search = !this.search;
		},
		goTools() {
			this.$router.push({
				path: '/',
				hash: '#section1'
			});
			// 工具集点击后收起菜单并恢复滚动
			this.isCollapse = false;
			document.body.style.overflow = '';
		},
		// 点击logo或标题返回首页
		goToHome() {
			this.$router.push('/');
			// 如果在移动端且菜单是展开状态，点击后收起菜单并恢复滚动
			if (this.judge === 1 && this.isCollapse) {
				this.isCollapse = false;
				document.body.style.overflow = ''; // 关键修复：恢复页面滚动能力
			}
		}
	},
	watch: {
		'$route': function () {
			this.getNavListData();
			// 路由变化时确保滚动状态正确
			if (!this.isCollapse) {
				document.body.style.overflow = '';
			}
		}
	}
};
</script>

<style>
/* 基础样式 */
.nav-container {
	width: 100%;
	background-color: #fff;
}

.nav {
	width: 92%;
	margin: 0 auto;
}

.logoTxt {
	display: flex;
	align-items: center;
	letter-spacing: 0.1em;
	cursor: pointer;
	/* 显示手型光标，表示可点击 */
}

.site-title {
	font-size: 26px;
	color: #DA0606;
	font-weight: bold;
	margin-left: 8px;
	font-family: "Microsoft YaHei", "Heiti SC", "STHeiti", SimHei, sans-serif;
	white-space: nowrap;
	/* 防止标题换行 */
}

/* 桌面端导航样式 */
.desktop-nav {
	display: flex;
	align-items: center;
}

.menu-container {
	margin-left: auto;
}

.navBox {
	height: 80px !important;
	background-color: #fff !important;
}

.el-menu--horizontal>.el-menu-item {
	height: 80px !important;
	line-height: 80px !important;
	font-size: 18px !important;
	margin: 0 10px !important;
}

.el-menu--horizontal>.el-menu-item.is-active {
	border-bottom-color: transparent !important;
}

.el-menu--horizontal>.el-submenu .el-submenu__title {
	height: 80px !important;
	line-height: 80px !important;
	font-size: 18px !important;
}

.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
	background-color: transparent !important;
}

.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
	display: none !important;
}

.el-menu.el-menu--horizontal {
	border: 0 !important;
	background-color: #fff !important;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
	outline: 0;
	background-color: transparent !important;
	color: #DA0606 !important;
}

/* 移动端导航样式 */
.mobile-nav {
	position: relative;
}

.mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	z-index: 1010;
	position: relative;
}

.mobile-header .logoTxt img {
	height: 30px;
}

.mobile-header .site-title {
	font-size: 20px;
	line-height: 60px;
}

.menu-toggle {
	background: none;
	border: none;
	color: #000;
	cursor: pointer;
	padding: 5px;
	z-index: 1010;
}

/* 遮罩层 - 降低阴影透明度 */
.menu-overlay {
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	/* 降低阴影浓度 */
	z-index: 1000;
	transition: opacity 0.3s ease;
}

/* 移动端菜单抽屉 - 右侧滑入、宽度减半、高度自适应、圆角 */
.mobile-menu-drawer {
	position: fixed;
	top: 60px;
	right: 0;
	/* 定位到右侧 */
	width: 50%;
	/* 宽度为原来的一半 */
	max-width: 200px;
	/* 最大宽度限制 */
	background-color: #fff;
	transform: translateX(100%);
	/* 初始位置在屏幕右侧外 */
	transition: transform 0.3s ease;
	z-index: 1005;
	overflow-y: auto;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	/* 左侧阴影 */
	border-radius: 10px 0 0 10px;
	/* 左上角和左下角圆角 */
}

.mobile-menu-drawer.open {
	transform: translateX(0);
	/* 从右侧滑入 */
}

/* 移动端菜单文字居中显示 */
.el-menu-vertical-demo {
	width: 100%;
	border-right: none !important;
}

.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-submenu__title {
	text-align: center !important;
	/* 强制文字居中 */
	justify-content: center !important;
	/* 针对flex布局的元素 */
	padding: 0 15px !important;
	/* 调整内边距确保居中效果 */
}

.el-menu-item.is-active {
	color: #DA0606 !important;
}

/* 响应式调整 */
@media screen and (max-width: 767px) {
	.nav {
		width: 95%;
	}

	.logoTxt img {
		height: 30px;
	}
}

@media screen and (min-width: 768px) and (max-width: 969px) {
	.logoTxt img {
		height: 35px;
	}
}

@media screen and (min-width: 970px) and (max-width: 1920px) {
	.logoTxt img {
		height: 40px;
	}
}

@media screen and (min-width: 1921px) {
	.nav {
		width: 1460px;
		margin: 0 auto;
	}

	.logoTxt img {
		height: 40px;
	}
}
</style>
